<template>
	<picker :range="range" :value="selectedIndex" @change="yearChange" @columnchange="column" mode="multiSelector">
		<view style="line-height: 50rpx; font-size: 30rpx;">{{ show?range[0][selectedIndex[0]]:placeholder }}{{ show?range[1][selectedIndex[1]]:'' }}</view>
	</picker>
</template>

<script>
  export default {
		props:{
			value:{
        type: String,
        default: '' ,
			},
			placeholder:{
        type: String,
        default: '请选择日期' ,
      },
    },
    methods: {
      yearChange(e) {
        this.selectedIndex = e
      },
		},
    data() {
      return {
        range: [['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']],
        selectedIndex: [], //当前日期回显
				show: false
      }
    },
		watch:{
			value:{
				handler(val){
					if(val){
					  this.default = val;
					}
					this.init()
				},
				immediate: true
			}
		},
    // 页面加载

    methods: {
			init(e) {
				if(this.default && this.default != 'null'){
					this.show = true
					var month = this.default.slice(0, 2)*1; //获取月份
					var nowDay = this.default.slice(2, 4)*1; //获取日
				}else{
					this.show = false
					var date = new Date();
					var month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
					var nowDay = date.getDate(); //获取当前日(1-31)
				}
				this.selectedIndex = [month - 1,nowDay - 1]; //当前日期回显
			  this.getDays(month);
			},
			getDays(month){
				var d = new Date(2000, month, 0);
				var days = d.getDate(); 
				
				var list = [];
				for (var i = 0; i < days; i++) {
				  var aa = i + 1;
				  if (aa < 10) {
				    aa = '0' + aa
				  } else {
				    aa = "" + aa
				  }
				  list.push(aa)
				}
				this.range[1] = list
				this.$forceUpdate();
			},
      yearChange: function(e) {
				this.show = true
				this.selectedIndex = e.detail.value
				this.$emit('input',this.range[0][e.detail.value[0]]+''+this.range[1][e.detail.value[1]])
      },
			column(e){
				if(e.detail.column == 0){
					this.getDays(e.detail.value+1)
				}
			}
    }
  }
</script>

<style>
</style>